<%--
  Created by IntelliJ IDEA.
  User: xiaomi
  Date: 2025/2/7
  Time: 9:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>首页</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <style>
        table {
            border-collapse: collapse;
            width: 80%;
            margin: 20px auto;
        }

        table,
        th,
        td {
            border: 1px solid rgb(165, 184, 213);
        }
        th,
        td {
            text-align: center;
            padding: 8px;
        }
        th{
            background: rgb(165, 184, 213);
            color: white;
        }
        button {
            padding: 5px 10px;
            margin: 5px;
            border: none;
            border-radius: 3px;
            background-color: rgb(165, 184, 213);
            color: white;
            cursor: pointer;
        }

        button:hover {
            background-color: rgb(125, 166, 217);
        }

        input[type = "checkbox"] {
            margin-right: 5px;
        }
        .modal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 20px;
            border: 1px solid #ccc;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 300px;
            z-index: 1000;
        }

        .modal h3 {
            margin-top: 0;
        }

        .modal label {
            display: block;
            margin-bottom: 5px;
        }

        .modal .form-group {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .modal .form-group label {
            margin-right: 10px;
            width: 80px;
            text-align: right;
            white-space: nowrap;
        }

        .modal .form-group input[type="text"], .modal .form-group select {
            flex: 1;
        }

        .modal-buttons {
            text-align: right;
            margin-top: 10px;
        }

        .modal-buttons button {
            margin-left: 5px;
        }

    </style>
</head>
<body>
<button id="addButton">添加</button>
<table id="courseTable">
    <tr>
        <th>套餐</th>
        <th>价格</th>
        <th>套餐类型</th>
        <th>内容</th>
        <th>操作</th>
    </tr>
</table>
<div id="addModal" class="modal">
    <h3>添加套餐</h3>
    <div class="form-group">
        <label>套餐名称:</label>
        <input type="text" id="addGoodname">
    </div>
    <div class="form-group">
        <label>价格:</label>
        <input type="text" id="addMoney">
    </div>
    <div class="form-group">
        <label>时间:</label>
        <input type="text" id="addTime">
    </div>
    <div class="form-group">
        <label>套餐类型:</label>
        <input type="text" id="addType">
    </div>
    <div class="form-group">
        <label>内容:</label>
        <textarea id="addContext"></textarea>
    </div>
    <div class="modal-buttons">
        <button id="saveAddButton">保存</button>
        <button id="cancelAddButton">取消</button>
    </div>
</div>
<div id="editModal" class="modal">
    <h3>编辑套餐</h3>
    <div class="form-group">
        <label>套餐名称:</label>
        <input type="text" id="editGoodname">
    </div>
    <div class="form-group">
        <label>价格:</label>
        <input type="text" id="editMoney">
    </div>
    <div class="form-group">
        <label>时间:</label>
        <input type="text" id="editTime">
    </div>
    <div class="form-group">
        <label>套餐类型:</label>
        <input type="text" id="editType">
    </div>
    <div class="form-group">
        <label>内容:</label>
        <textarea id="editContext"></textarea>
    </div>
    <div class="modal-buttons">
        <button id="saveEditButton">保存</button>
        <button id="cancelEditButton">取消</button>
    </div>
</div>

<script>
    $(document).ready(function () {
        $('#addButton').click(function () {
            $('#addModal').show();
        });
        $('#cancelAddButton').click(function () {
            $('#addModal').hide();
        });
        $('#saveAddButton').click(function () {
            var goodname = $('#addGoodname').val();
            var money = $('#addMoney').val();
            var time = $('#addTime').val();
            var type = $('#addType').val();
            var context = $('#addContext').val();
            var list={
                goodname: goodname,
                money: money,
                time: time,
                type: type,
                context: context
            };
            var url = './good/insert';
            $.ajax({
                url: url,
                type: 'POST',
                data: JSON.stringify(list),
                contentType: "application/json",
                success: function () {
                    alert('添加成功');
                    $('#addModal').hide();
                    location.reload();
                },
                error: function () {
                    alert('添加失败');
                }
            });
        });
        // 使用AJAX获取课程信息
        $.ajax({
            url: './good/list',
            type: 'POST',
            contentType: "application/json",
            success: function (data) {
                var table = $('#courseTable');
                data.forEach(function (course) {
                    var row = $('<tr></tr>');
                    row.append($('<td></td>').text(course.goodname));
                    row.append($('<td></td>').text(course.money + "元/"+course.time));
                    row.append($('<td></td>').text(course.type));
                    row.append($('<td></td>').text(course.context));
                    row.append($('<td></td>').append($('<button class="deleteButton" , data-course-id="' + course.id + '">删除</button>')).append($('<button class="editButton" , data-course-id="' + course.id + '">修改</button>')));
                    table.append(row);
                });
            },
            error: function () {
                alert('获取用户信息失败');
            }
        });
        $(document).on('click','.deleteButton',function () {
            var id = $(this).attr('data-course-id');
            console.log(id);
            var url = './good/delete/'+id;
            $.ajax({
                url: url,
                type: 'DELETE',
                success: function () {
                    alert('删除成功');
                    location.reload();
                },
                error: function () {
                    alert('删除失败');
                }
            });
        });
        $(document).on('click','.editButton',function () {
            selectedCourseId = $(this).attr('data-course-id');
            var row = $(this).closest('tr');
            var goodname = row.find('td:eq(0)').text();
            var money = row.find('td:eq(1)').text().split('元/')[0];
            var time = row.find('td:eq(1)').text().split('元/')[1];
            var type = row.find('td:eq(2)').text();
            var context = row.find('td:eq(3)').text();

            // 填充模态框数据
            $('#editGoodname').val(goodname);
            $('#editMoney').val(money);
            $('#editTime').val(time);
            $('#editType').val(type);
            $('#editContext').val(context);
            // 显示模态框
            $('#editModal').show();
        });
        $('#cancelEditButton').click(function () {
            $('#editModal').hide();
        });
        $('#saveEditButton').click(function () {
            var id = selectedCourseId;
            var goodname = $('#editGoodname').val();
            var money = $('#editMoney').val();
            var time = $('#editTime').val();
            var type = $('#editType').val();
            var context = $('#editContext').val();
            var user = {
                id:id,
                goodname: goodname,
                money: money,
                time: time,
                type: type,
                context: context
            };
            console.log(user);
            $.ajax({
                url: './good/updatelist',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(user),
                success: function () {
                    alert('修改成功');
                    $('#editModal').hide();
                    location.reload();
                },
                error: function () {
                    alert('添加失败');
                }
            });
        });
    });
</script>
</body>
</html>